<!-- components/navigation/OrganizationSwitcher.vue -->
<template>
  <div class="org-switcher">
    <el-dropdown @command="handleOrgChange">
      <el-button class="org-dropdown-btn" :icon="OfficeBuilding">
        {{ currentOrg?.name || '请选择组织' }}
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item
            v-for="org in organizations"
            :key="org.id"
            :command="org.id"
            :disabled="org.id === currentOrg?.id"
          >
            {{ org.name }}
          </el-dropdown-item>
          <el-dropdown-item divided @click="handleManageOrgs">
            <el-icon><Setting /></el-icon>
            组织管理
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { ref, computed, onMounted } from 'vue'
import { useAppStore } from '@/stores/appStore'
import { OfficeBuilding, ArrowDown, Setting } from '@element-plus/icons-vue'

const appStore = useAppStore()

// 计算属性
const organizations = computed(() => appStore.organizations)
const currentOrg = computed(() => appStore.currentOrganization)

// 方法
const handleOrgChange = (orgId: string) => {
  appStore.switchOrganization(orgId)
}

const handleManageOrgs = () => {
  console.log('管理组织')
}
</script>

<style scoped>
.org-switcher {
  margin-right: 16px;
}

.org-dropdown-btn {
  background: var(--header-bg, #ffffff);
  border: 1px solid var(--border-color, #dcdfe6);
  color: var(--header-text, #262626);
  transition: all 0.3s ease;
}

.org-dropdown-btn:hover {
  background: var(--user-dropdown-hover, #f5f5f5);
  border-color: var(--primary-color, #409eff);
}

.org-dropdown-btn:focus {
  border-color: var(--primary-color, #409eff);
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
</style>